<script setup>
import {ref} from 'vue'
const popupRef=ref()
const selectedItem=ref()
const hospitalDetail=ref([
	{name:"湘潭市市中心医院",tip:"三级甲等综合医院，提供全面医疗服务",icon:"/static/hospital.png"},
	{name:"湘潭市第一人民医院",tip:"综合性三甲医院，特色专科突出",icon:"/static/hospital1.png"},
	{name:"湘潭市中医医院",tip:"中西医结合，传承中医文化",icon:"/static/hospital2.png"},
	{name:"湘潭市第三人民医院",tip:"综合性医院，特色专科服务",icon:"/static/hospital3.png"},
	{name:"湘潭市口腔医院",tip:"专业口腔医疗，呵护牙齿健康",icon:"/static/tooth.png"}
])


//处理二维码逻辑
const handleQrcode=(item)=>{
	popupRef.value.open('center')
	selectedItem.value=item
}

</script>


<template>
	<view class="center-box">
		<view class="title">
			<image src="/static/hospital.png" class="icon"></image>
			<view class="text">湘潭市医院微信公众号</view>
		</view>
		<view class="core-function">
			<view class="func-item">
				<view class="img">
					<image src="/static/qrcode.png"></image>
				</view>
				<view class="title">医院公众号服务</view>
				<view class="tip">关注湘潭市各大医院官方公众号，获取最新医疗资讯、预约挂号、在线问诊等服务。点击右侧维码图标查看各医院公众号二维码。</view>
			</view>
		</view>
		<!--具体医院-->
		 <view class="hospital-box">
		 	<view v-for="item in hospitalDetail" :key="item.name" class="item">
				<view class="icon"><image :src="item.icon"></image></view>
				<view class="detail">
					<view class="name">{{item.name}}</view>
					<view class="tip">{{item.tip}}</view>
				</view>
				<view class="qrcode" @tap="handleQrcode(item)"><image src="/static/qrcode.png"></image></view>
			</view>
		 </view>
		 
		 
		 <view class="title special">
		 	<image src="/static/nurse.png" class="icon"></image>
		 	<view class="text">湘潭市医院微信公众号</view>
		 </view>
		 <view class="core-function ">
		 	<view class="func-item">
		 		<view class="img">
		 			<image src="/static/save.png"></image>
		 		</view>
		 		<view class="title">在线问诊服务</view>
		 		<view class="tip">与专业医生进行视频交流，描述症状获取专业建议，支持处方开具和药品配送。</view>
		 	    <view class="btn"><button>立即问诊</button></view>
			</view>
		 </view>
		 
		 <!--弹出框-->
		 <uni-popup borderRadius="10px 10px 10px 10px"  background-color="white" ref="popupRef">
		 	<view class="popup">
		 		<view class="name">{{selectedItem?.name}}公众号</view>
		 		<view class="img"><image style="width: 400rpx;height: 400rpx;" src="/static/qrcode1.png"></image></view>
		 		<view class="tip">使用微信扫描二维码进行关注</view>
		 	</view>
		 </uni-popup>
	</view>
	
	
	
</template>


<style lang="scss" scoped>
	.popup{
		margin-top: 35rpx;
		width: 600rpx;
		text-align: center;
		height: 500rpx;
		.tip{
			font-size: 26rpx;
			color:#999;
		}
	}
	.center-box {
		padding: 20rpx;
		.hospital-box{
			margin-top: 50rpx;
			.item{
				width: 80%;
				border: 1px solid #eee;
				box-shadow: -8rpx 0 12rpx -2rpx rgba(106, 144, 201, 0.6);
				margin: 0 auto;
				display: flex;
				align-items: center;
				
				height: 180rpx;
				padding: 0 50rpx;
				border-radius: 10rpx;
				margin-top: 20rpx;
				direction: ltr;
				margin-bottom: 10rpx;
				.detail{
					width: 100%;
					margin-left: 20rpx;
					.name{
						font-weight: 700;
					}
					.tip{
						margin-top: 10rpx;
						font-size: 24rpx;
					}
				}
				.qrcode{
					
					margin-left: 30rpx;
					image{
						width: 61rpx;
						height: 61rpx;
					}
					direction: rtl;
				}
			}
		}
		.title {
			display: flex;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;

			}

			.text {
				margin-left: 15rpx;
				color: rgb(106, 144, 201);
				font-weight: 600;
				font-size: 32rpx;
				letter-spacing: 1rpx;
			}
		}

		image {
			width: 51rpx;
			height: 51rpx;
		}
	}

	.core-function {
		margin-top: 20rpx;

		.func-item {
			margin: 20rpx auto;
			width: 85%;
			height: 400rpx;
			border: 1px solid #eee;
			box-shadow: -8rpx 0 12rpx -2rpx rgba(255, 120, 88, 0.6);
			border-radius: 10rpx;
			padding: 30rpx;
			.btn{
				button{
					display: flex;
					align-items: center;
					width: 200rpx;
					border-radius: 20rpx;
					height: 70rpx;
					font-size: 26rpx;
					justify-content: center;
					background: rgb(107, 144, 196);
					color:white;
					margin-left: 0;
					
				}
			}
			view {
				margin-top: 35rpx;
			}

			.img {
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				width: 100rpx;
				height: 100rpx;
				background-color: rgb(213, 226, 242);
			}
			.title {
				font-weight: 700;
			}
			.tip {
				font-size: 26rpx;
			}
		}
	}
	.special{
		margin-top: 60rpx;
	}
</style>